<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>考勤平台</title>
<link rel="stylesheet" href="./resource/layui/css/layui.css" media="all">
<script src="./resource/js/jquery-2.0.3.js" type="text/javascript"
	charset="utf-8"></script>
<link rel="stylesheet" type="text/css"
	href="./resource/css/style2.0.css">
<script src="./resource/js/jquery.cookie.js">
	
</script>
<style type="text/css">
ul li {
	font-size: 30px;
	color: #0DB6F5;
}

.tyg-div {
	z-index: -1000;
	float: left;
	position: absolute;
	left: 5%;
	top: 20%;
}

.tyg-p {
	font-size: 14px;
	font-family: 'microsoft yahei';
	position: absolute;
	top: 135px;
	left: 60px;
}

.tyg-div-denglv {
	z-index: 1000;
	float: right;
	position: absolute;
	right: 3%;
	top: 10%;
}

.tyg-div-form {
	background-color: #23305a;
	width: 300px;
	height: auto;
	margin: 120px auto 0 auto;
	color: #0DB6F5;
	border-radius: 6px;
}

.tyg-div-form form {
	padding: 10px;
}

.tyg-div-form form .user {
	width: 270px;
	height: 30px;
	margin: 25px 10px 0px 0px;
	border: none;
	border-radius: 2px;
}

.tyg-div-form form #login {
	cursor: pointer;
	width: 120px;
	height: 38px;
	margin-top: -7px;
	padding: 0;
	background: #0DB6F5;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	border: 1px solid #0DB6F5;
	-moz-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px
		0 rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px
		7px 0 rgba(0, 0, 0, .2);
	box-shadow: 0 15px 30px 0 rgba(255, 255, 255, .25) inset, 0 2px 7px 0
		rgba(0, 0, 0, .2);
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
	-o-transition: all .2s;
	-moz-transition: all .2s;
	-webkit-transition: all .2s;
	-ms-transition: all .2s;
}

#facelogin {
	margin-top: -8px;
	border-radius: 6px;
}
#remember{
  font-size: 20px;
}
.layui-input-block {
    margin-left: 126px;
    min-height: 12px;
}
#login-form{
   width:275px;
   height: 300px;
  margin-right:50px;
}
.layui-form-label {
    float: left;
    display: block;
    padding: 25px 15px;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}
.layui-form-switch {
    position: relative;
    height: 22px;
    line-height: 22px;
    min-width: 35px;
    padding: 0px 5px;
    margin-top: 24px;
   
    border-radius: 20px;
    cursor: pointer;
    
    -webkit-transition: .1s linear;
    transition: .1s linear;
}
</style>
</head>
<body>
<% request.getSession(); session.invalidate(); %>
	<div class="tyg-div">
		<ul>
			<li>
				<div style="margin-left: 20px;">让</div>
			</li>
			<li>
				<div style="margin-left: 40px;">考</div>
			</li>
			<li>
				<div style="margin-left: 60px;">勤</div>
			</li>
			<li>
				<div style="margin-left: 80px;">更</div>
			</li>
			<li>
				<div style="margin-left: 100px;">简</div>
			</li>
			<li>
				<div style="margin-left: 120px;">单</div>
			</li>
		</ul>
	</div>
	<div id="contPar" class="contPar">
		<div id="page1" style="z-index: 1;">
			<div class="title0">人力资源考勤平台</div>
			<div class="title1">欢迎登陆</div>
			<img alt="" class="img3 png" src="${pageContext.request.contextPath}/resource/image/page1_3.jpg">
		</div>
	</div>
	<div class="tyg-div-denglv">
		<div class="tyg-div-form">
			<form action="EmpServlet" class="layui-form" id="login-form">
				<h2>登录</h2>
				<p class="tyg-p">欢迎访问 考勤平台</p>
				<div style="margin: 5px 0px;">
					<input class="user" name="username" type="text" id="username"
						placeholder="请输入账号..." />
				</div>
				<div style="margin: 5px 0px;">
					<input class="user" name="password" type="password" id="password"
						placeholder="请输入密码..." />
				</div>
				<div class="layui-form-item" id="div-check">
					<label class="layui-form-label" id="remember">记住密码</label>
					<div class="layui-input-block">
						<input type="checkbox" name="cksremember" lay-skin="switch"
							lay-text="ON|OFF" id="username">
					</div>
				</div>

				<input type="hidden" name="op" value="LoginEmp" /> <input
					type="submit" value="登录" class="layui-btn layui-btn-normal"
					id="login"> <span data-method="offset" data-type="auto"
					class="layui-btn layui-btn-normal" id="facelogin">人脸识别登录</span>
				<!-- 设置隐藏域,来接收值 -->
				<input type="hidden" name="" id="ara" value="" />

			</form>
		</div>
	</div>
	<div class="layui-footer">
		<!-- 底部固定区域 -->
		© 中软 - JAVA二阶段项目 - 基于人脸识别的考勤系统 by TeamWork_XM
	</div>
	<script src="./resource/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script type="text/javascript">
		layui.use('form', function() {
			var form = layui.form;
		});
		layui.use('layer', function() { //独立版的layer无需执行这一句
			var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
			//触发事件
			var active = {
				offset : function(othis) {
					var type = othis.data('type'), text = othis.text();
					layer.open({
						title : '人脸识别登录',
						type : 2,
						offset : type
						//,id: 'layerDemo'+type //防止重复弹出
						,
						anim : 5 //弹窗特效
						,
						content : 'facelogin.jsp' //ifame的页面
						,
						maxmin : true,
						area : [ '1280px', '720px' ]
						//, shadeClose: true
						,
						btn : '关闭',
						//执行成功获取子窗口的值
						success : function(layero, index) {
							var obj = layero.find("iframe")[0].contentWindow;//获取子窗体对象
							//定义childDbClick函数
							obj.childDbClick = function() {
								var win = top.window['layui-layer-iframe'
										+ index];
								var area = win.$("#area").val(); //获取子窗体数据
								//设置到隐藏框里面,隐藏值改变
								$("#ara").val(area).change();
								console.log("父页面隐藏域的值:" + $("#ara").val());//取到隐藏框的值是1,1就是人脸识别登录成功
								top.layer.close(index);//关闭子窗体
							}

						},

						btnAlign : 'c' //按钮居中
						,
						shade : 0.1 //不显示遮罩
						,
						yes : function() {
							layer.closeAll();
						}
					});
				}
			};
			$('#facelogin').on('click', function() {
				var othis = $(this), method = othis.data('method');
				active[method] ? active[method].call(this, othis) : '';
			});
		});

		//隐藏域事件
		$("#ara").change(function() {
			var logincode = $("#ara").val();
			//规定1是人脸识别注册，同时登记考勤信息
			if (logincode == 1) {

				//注意跳转的主页面后面需要更改
				window.location.href = "UserInfo.jsp";

				//注意跳转的主页面后面需要更改

				window.location.href = "Note.jsp";

			}

		})
		//cookie
		$("#username").blur(function() {
			var username = $.cookie('username');
			var password = $.cookie('password');
			console.log(password);
			if ($(this).val() == username) {
				$("#password").val(password);

			}
		})
		 
	</script>
</body>
</html>